
/*轮播*/
.car-pic{
    margin: 0 auto;
}
.swiper-container{
    /*height: 950px;*/
    overflow: hidden;
}
.swiper-container img.ani{
    position: absolute;
    top:25%;
    left: 18%;
    z-index: 2;
    width: 471px;
    height: 223px;
    opacity: 0;
}

.swiper-container img.banner_text{
    animation: textAnimate 0.8s cubic-bezier(.4,0,.2,1) 0s 1;
    animation-fill-mode:forwards;
    -webkit-animation: textAnimate 0.8s cubic-bezier(.4,0,.2,1) 0s 1;
    -webkit-animation-fill-mode:forwards;
}
.swiper-container img.letter{
    position: absolute;
    z-index: 1;
}
.swiper-container img.a{
    top:100px;
    left: 380px;
    width: 45%;
    height: 85%;
}
.swiper-container img.b{
    top:100px;
    left:100px;
    width: 40%;
    height: 80%;
}
.swiper-container img.c{
    top:100px;
    left: 380px;
    width: 45%;
    height: 85%;
}
@keyframes textAnimate {
    from{
        opacity: 0;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }
    to{
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}
@-webkit-keyframes textAnimate {
    from{
        opacity: 0;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
    }
    to{
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}


.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 30px;
}
.swiper-container img{
    /*width: 1200px;*/
    width: 100%;
    /*height: 960px;*/
}


.swiper-pagination-bullet{
    background-color: #ffffff;
    height: 13px;
    width: 13px;
    opacity: 0.5;
}
.swiper-pagination-bullet-active {
    width: 42px;
    height: 13px;
    background-color: white;
    border-radius: 24px;
    transition: width 0.3s;
    opacity: 1;
}
.swiper-button-next,.swiper-button-prev{
    /*width: 60px;*/
    /*height: 60px;*/
    top:calc(50% - 30px);
}
.swiper-button-prev{
    left: 100px;
    background-image: url() ;
    background-size: contain;
}
.page_bg{
    background-color: rgba(0,0,0,0.5);
    height: 26px;
    width: 118px;
    border-radius: 13px;
    position: absolute;
    bottom: 27px;
    z-index: 5;
    /*left: calc(50% - 57px);*/
    left: 50%;
    margin-left: -57px;
}
/*.swiper-button-prev:hover{*/
    /*background-image: url();*/
/*}*/

.swiper-button-next{
    background-size: contain;
    right: 100px;
    background-image: url();
}
/*.swiper-button-next:hover{*/
    /*background-image: url();*/
/*}*/
/*----------------------------第一段文字----------------------------------*/
.first_text{
    width: 1200px;
    margin: 0 auto;
    margin-top: 122px;
    color: #555555;
    overflow: hidden;
}
.first_text h1,.project h1,.intro h1{
    font-size: 34px;
    color: #0093e9;
    font-weight: 500;
    margin-bottom: 26px;
}



/*------------------------------------------------------------------------------------*/
/*三个demo*/
.demo {
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    height: 393px;
    margin-top: 50px;
}
.demo h3, .project h3,.intro h3{
    font-size: 36px;
    margin-bottom: 6px;
    font-weight: 100;
    color: #5b5b5b;
}
.demo img{
    margin-bottom: 35px;
    cursor: pointer;
    transition: all .4s;
    -webkit-transition: all 0.4s;
}
.demo img:hover{
    transform:translateY(-15px);
    -webkit-transform: translateY(-15px);
}

.demo>div{
    width: 300px;
    height: 300px;
    margin: 50px;
    float: left;
}
.demo p{
    line-height: 30px;
    font-size: 18px;
    color: #aeaeae;
    font-weight:100;
}
/*案例介绍*/
.project{
    width: 1200px;
    margin: 120px auto;
    text-align: center;
    overflow: hidden;
}
.project h1{
    text-align: left;
    margin-top:120px ;
}
.line{
    height: 1px;
    background-color: #dadada;
    width: 100%;
    /*margin-top: 30px;*/
}
.project-content>div{
    width: 360px;
    height: 400px;
    /*margin:0 20px;*/
    margin: 40px 60px 40px 0;
    text-align: center;
    float: left;
}
.project-content>div:nth-child(3),.project-content>div:nth-child(6){
    margin-right: 0;
}
.project-content>div:nth-child(4),.project-content>div:nth-child(5),.project-content>div:nth-child(6){
    margin-top: 0;
    margin-bottom: 0;
}
div.mar_top_0{
    margin-top: 0;
    margin-bottom: 0;
}
.text_intro{
    text-align: left;
    font-size: 18px;
    line-height: 32px;
    color: #555555;
    max-height: 100%;
}

.project-content h4{
    font-size: 24px;
    margin: 20px 0;
    font-weight: 100;
}
.project-content>div div{
    width: 360px;
    height: 400px;
    background-color: #02b5f0;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.project-content img{
    width: 100%;
    height: 100%;
}
.project-content>div div span{
    display: inline-block;
    background-color: rgba(0,0,0,0.4);
    width:85%;
    margin: 0 auto;
    height: 90px;
    color: #fafafa;
    position: absolute;
    bottom:-120px;
    text-align: left;
    padding-left: 20px;
    padding-top: 8px;
    font-size: 18px;
    box-sizing: border-box;
    line-height: 40px;
    left: 0;
    right: 0;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    z-index: 5;
}
.project-content>div div:hover .span{
    bottom: 0;
}

/*合作商家*/
.intro{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    margin-top: 120px;
}
.intro h1{
    text-align: left;
    margin-top: 120px;
}

.intro-content{
    width: 1958px;
    height: 108px;
    margin: 50px 16px;
    position: relative;
}
.logo_content_box{
    overflow: hidden;
    width: 90%;
}
.logo_business img{
    float: left;
    margin:  0 15px;

}
.logo_business{
    width: 1958px;
    overflow: hidden;
}
.logo_left,.logo_right{
    margin-top: 75px;
    cursor: pointer;
}
.logo_right{
    margin-left: 19px;
}

